<template>
    <view class="content">
		<u-navbar title="账号申诉"  :autoBack="true">
				</u-navbar>
        <view class="add">
            
            <view class="c1">原登录手机账号</view>
            <view class="c2">
                <u--input
                    v-model='row.origin_loginmobile'
                    placeholder="请输入"
                    :customStyle="{padding: '0 32rpx'}"
                >
                </u--input>
            </view>
            
            <view class="c1">不能登录原因</view>
            <view class="c3">
                <textarea v-model="row.issue_reason" />
            </view>
            
            <view class="c1">当前联络方式</view>
            <view class="c2">
                <u--input
                    v-model='row.current_contactinfo'
                    placeholder="请输入"
                    :customStyle="{padding: '0 32rpx'}"
                >
                </u--input>
            </view>
            
        </view>
        
        <view class="but">
            <view class="s2" @click="onSend()">
                <text>提 交</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                row: {
                    origin_loginmobile: '',
                    issue_reason: '',
                    current_contactinfo: '',
                }
            };
        },
        methods: {
            onSend() {
                this.$API.sendAccountissue(this.row).then(res => {
                    uni.showModal({
                        content: '提交成功',
                        showCancel: false,
                        success:function(){
                            uni.redirectTo({
                                url: '/pages/index/index'
                            })
                        }
                    })
                    
                });
            }
        }
    }
</script>

<style lang="scss">
.content {
    width: 670rpx;
    margin: 0 auto;
}
.add {
    width: 590rpx;
    padding: 52rpx 40rpx;
    background-color: #fff;
    border-radius: 48rpx;
    margin-top: 52rpx;
    
    .s1 {
        width: 100%;
        height: 34rpx;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 600;
        color: #7677EB;
        line-height: 34rpx;
        text-align: center;
    }
    .title {
        width: 100%;
        height: 52rpx;
        font-size: 36rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 600;
        color: #110202;
        line-height: 52rpx;
        text-align: center;
        margin-top: 16rpx;
    }
    
    .c1 {
        height: 28rpx;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        color: #7D8592;
        line-height: 28rpx;
        margin-top: 56rpx;
    }
    
    .c2 {
        width: 590rpx;
        margin-top: 40rpx;
        /deep/ .u-input {
            height: 98rpx;
            border-radius: 28rpx;
        }
    }
    
    .c3 {
        width: 526rpx;
        height: 166rpx;
        margin-top: 40rpx;
        border: 2rpx solid #D8E0F0;
        border-radius: 16rpx;
        padding: 32rpx;
    }
}

.but {
    @include flex;
    margin-top: 60rpx;
    margin-bottom: 60rpx;
    
    .s2 {
        width: 290rpx;
        height: 96rpx;
        background: #7677EB;
        box-shadow: 0 12rpx 24rpx 0 rgba(63,140,255,0.2637);
        border-radius: 28rpx;
        margin: 0 auto;
        text-align: center;
        
        text {
            font-size: 30rpx;
            font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 96rpx;
        }
    }
}
</style>
